<template>
  <view class="mainPge">
    <headerPublic @backfn="backfn" style="position: fixed;" title="跨部门办案平台" />
    <view class="page-content">

      <view class="tabs">
        <view class="tbrow">
          <view class="tabit" v-for="(it) in tabs" :key="it.value" @click="handeltabcheck(it.value)">
            <text class="t1">{{ it.lable }}</text>
            <view class="activeli" :class="{ check: tabcheck == it.value }"></view>
          </view>
        </view>
      </view>

      <view style="height: 40px; border-radius: 5px; margin: 5px; background-color:white;" v-show="tabcheck == 1">
        <view style="text-align:center;padding-top: 10px; padding-bottom: 10px; color:rgb(184, 184, 184)">
          从2020年6月1日至今
        </view>
      </view>


      <view style="background-color: white; height: 40px;" v-show='tabcheck == 5'>
        <view class="example-body">
          <uni-datetime-picker v-model="datetimerange" type="daterange" rangeSeparator="--" />
        </view>
      </view>

      <view
        style="text-align:center; height: 160px; border-radius: 5px; margin: 5px; font-weight: bold; background-color:white;">
        <view style="padding-top: 20px; padding-bottom: 10px;">刑事案件统计</view>
        <view style="text-align:center; border-radius: 5px; margin: 5px 5px; float:left; width:47%; height:40%; ">
          刑事案件</br></br>
          <text id='CasesNum' style="font-size: 40px; color: #5882FA;">1</text>
        </view>
        <view
          style="text-align:center; height: 100px; border-radius: 5px; margin: 5px 5px; float:left; width:47%; height:40%;">
          涉案人数</br></br>
          <text id='PeopleNum' style="font-size: 40px; color: #5882FA;">2</text>
        </view>
      </view>

      <div id="ReasonChart" style="height: 350px; border-radius: 5px; margin: 5px; background-color:white;"></div>
      <div id="ageChart" style="height: 350px; border-radius: 5px; margin: 5px; background-color:white;"></div>
      <div id="educationChart" style="height: 350px; border-radius: 5px; margin: 5px; background-color:white;"></div>
      <!-- <div id="myMap" style="height: 600px; border-radius: 5px; margin: 5px; background-color:white;"></div> -->
      <div id="casesChart" style="height: 350px; border-radius: 5px; margin: 5px; background-color:white;">
        <table id="tab" style="width: 100%;">
          <tr>
            <th
              style="width: 25%; height: 50px; line-height: 50px; text-align: center; background-color: #81a5ff; border-radius: 5px;color:#fff">
              地区名称</th>
            <th
              style="width: 40%; height: 50px; line-height: 50px; text-align: center; background-color: #81a5ff; border-radius: 5px;color:#fff">
              案件数{{ casesTable }}</th>
            <th
              style="width: 40%; height: 50px; line-height: 50px; text-align: center; background-color: #81a5ff; border-radius: 5px;color:#fff">
              涉案人数</th>
          </tr>
          <tr v-for="(item, index) in casesTable" :key="index">
            <td>{{ item.name }}</td>
            <td>{{ item.casesNum }}</td>
            <td>{{ item.peopleNum }}</td>
          </tr>
        </table>
      </div>
    </view>
  </view>
</template>

<script>
import { parseTime } from '@/utils/format'
import { getCdchpData } from '@/api/index.js'
export default {
  name: 'cdchp',
  data() {
    return {
      datetimerange: null,
      tabcheck: 1,
      current: new Date(),
      currentDateOnly: new Date().getDate(),
      currentDay: new Date().getDay(),
      currentMouth: new Date().getMonth(),
      currentYear: new Date().getFullYear(),
      currentDate: parseTime(new Date(), '{y}-{m}-{d}'),//new Date().format('{y}-{m}-{d}'),
      startDate: new Date(),
      params: {
        startTime: null,
        endTime: null,
      },
      xo: {
        data: {},
        reasonList: {},
        ageList: {},
        educationList: {},
        mapList: {},
        code: "",
      },
      casesTable: [],
      tabs: [{
        lable: '全部',
        value: 1
      },
      {
        lable: '本周',
        value: 2
      },
      {
        lable: '本月',
        value: 3
      },
      {
        lable: '本年',
        value: 4
      },
      {
        lable: '选择时间',
        value: 5
      }
      ],
    };
  },
  mounted() {
    this.PieChart("案由分布情况", "ReasonChart")
    this.PieChart("年龄段分布", "ageChart")
    this.initEducationChart()
    this.getBaptData()
  },
  methods: {
    // tab切换
    handeltabcheck(value) {
      this.tabcheck = value;
    },
    dataMap(List) {
      //判断目标地区
      console.log(List);
      var rtnList = [];
      var rtnTable = [];
      angular.forEach(List, function (obj, index) {
        if (positionData[obj.areaName] != null) {
          let positionItem = positionData[obj.areaName];
          positionItem.push(obj.count);
          positionItem.push(obj.count2);
          positionItem.push(obj.areaName);
          let rtnItem = {
            name: obj.areaName,
            value: positionItem,
          };
          let tableItem = {
            name: obj.areaName,
            casesNum: obj.count2,
            peopleNum: obj.count,
          };
          rtnList.push(rtnItem);
          rtnTable.push(tableItem);
          // $scope.casesTable.push(value);
        }
      });
      console.log("datamap");
      console.log(rtnList);
      this.casesTable = rtnTable;
      // $("#tab").empty();
      // str =
      //   '<tr><th style="border-style: solid; border-color: white;  border-width: 3px;padding: 3px,10px; width: 200px; height: 50px; line-height: 50px; text-align: center; color: white; background-color: #81a5ff; border-radius: 10px;">地区名称</th>' +
      //   '<th style="border-style: solid; border-color: white; border-width: 3px; padding: 3px,10px; width: 300px; height: 50px; line-height: 50px; text-align: center; color: white; background-color: #81a5ff; border-radius: 10px;">案件数</th>' +
      //   '<th style="border-style: solid; border-color: white; border-width: 3px; padding: 3px,10px; width: 300px; height: 50px; line-height: 50px; text-align: center; color: white; background-color: #81a5ff; border-radius: 10px;">涉案人数</th></tr>';
      // $("#tab").append(str);
      // for (var i = 0; i < rtnTable.length; i++) {
      //   //拼接表格的行和列
      //   str =
      //     "<tr><td style='border-style: solid; border-color: white; border-width: 3px; background-color: #c9d3ed; border-radius: 10px; padding: 3px,10px; text-align: center;'>" +
      //     rtnTable[i].name +
      //     "</td><td style='border-style: solid; border-color: white; border-width: 3px; background-color: #c9d3ed; border-radius: 10px; margin: 3px,10px; text-align: center;'>" +
      //     rtnTable[i].casesNum +
      //     "</td><td style='border-style: solid; border-color: white; border-width: 3px; background-color: #c9d3ed; border-radius: 10px; text-align: center;'>" +
      //     rtnTable[i].peopleNum +
      //     "</td></tr>";
      //   //追加到table中
      //   $("#tab").append(str);
      // }
      // //location.reload()
      // console.log(rtnTable);
      return rtnList;
    },
    getBaptData(areaCode) {
      if (this.tabcheck == 1) {
        this.params.startTime = parseTime(new Date(2020, 5, 1), '{y}-{m}-{d}')//new Date(2020, 5, 1).format('{y}-{m}-{d}');
        this.params.endTime = this.currentDate;
      } else if (this.tabcheck == 2) {
        this.startDate.setDate(this.startDate.getDate() - this.currentDay);
        this.params.startTime = parseTime(this.startDate, '{y}-{m}-{d}') //this.startDate.format('{y}-{m}-{d}');
        this.params.endTime = this.currentDate;
      } else if (this.tabcheck == 3) {
        this.startDate.setDate(this.startDate.getDate() - this.currentDateOnly + 1);
        this.params.startTime = parseTime(this.startDate, '{y}-{m}-{d}') //this.startDate.format('{y}-{m}-{d}');
        this.params.endTime = this.currentDate;
      } else if (this.tabcheck == 4) {
        this.params.startTime = parseTime(new Date(this.currentYear, 0, 1), '{y}-{m}-{d}') //new Date(this.currentYear, 0, 1).format('{y}-{m}-{d}');
        this.params.endTime = this.currentDate;
      }
      if (areaCode != null && areaCode != "") {
        this.params["orderId"] = areaCode;
      }
      console.log(this.params);
      getCdchpData(this.params).then(res => { 
        console.log('res',res);
        
      });
      // uni.request({
      //   method: "POST",
      //   contentType: "application/x-www-form-urlencoded",
      //   params: this.params,
      //   url: "http://zft.zjucd.com/ecweb/jjw/peopleArea/selectBapt",
      //   enableCache: true, // 自动处理缓存
      //   success: (res) => {
      //       if (res.statusCode === 200) {
      //         if (res.data.code == 200) {
      //           console.log(res.data);
      //         } else {
      //           uni.showToast({
      //             title: res.data.code == 500 && res.data.msg ?
      //               res.data.msg : "未知错误",
      //             icon: "none",
      //             duration: 1500,
      //           });
      //         }
      //     }
      //   } 
      // });
      // $http({
      // 	method: "POST",
      // 	contentType: "application/x-www-form-urlencoded",
      // 	params: this.params,
      // 	url: "jjw/peopleArea/selectBapt",
      // }).then(
      // 	function successCallback(response) {
      // 		if (response.data.code == "failure") {
      // 			console.log(response.data.message);
      // 			this.initMap();
      // 			// ngDialog.alert(response.data.message);
      // 		} else {
      // 			let responseObj = JSON.parse(response.data.body.resbapt);
      // 			if (responseObj.flag == "true") {
      // 				console.log(this.xo.data);
      // 				this.xo.data = responseObj.data;
      // 				// this.xo.data = testData;
      // 				let CasesList = this.xo.data["ajzlCountVo"];
      // 				this.xo.reasonList = this.xo.data["ayNodeList"];
      // 				this.xo.ageList = this.xo.data["peopleAgeDataList"];
      // 				this.xo.educationList =
      // 					this.xo.data["peopleEducationDataList"];
      // 				this.xo.mapList = this.xo.data["mapDataVoList"];
      // 				// $(function() {
      // 				// 	$("#CasesNum").text(CasesList["xsajCount"]);
      // 				// 	$("#PeopleNum").text(CasesList["saryCount"]);
      // 				// });
      // 				// initAgeChart();
      // 				this.initEducationChart();
      // 				this.PieChart("年龄段分布", "ageChart")
      // 				this.xo.code = this.xo.mapList[0].areaCode;
      // 				// $.get(
      // 				// 	"/mview/ecoa/bapt/map/" + this.xo.code + ".json",
      // 				// 	function(map) {
      // 				// 		this.$echarts.registerMap(this.xo.code, map);
      // 				// 		if (this.xo.mapList.length != 0) {
      // 				// 			this.initMap();
      // 				// 		}
      // 				// 	}
      // 				// );
      // 				this.PieChart("案由分布情况", "ReasonChart")
      // 			}
      // 		}
      // 	},
      // 	function errorCallback(response) {
      // 		this.initMap();
      // 	}
      // );
    },
    initMap() {
      const chartBox = this.$echarts.init(document.getElementById("myMap"));
      const option = {
        title: {
          text: "{a|刑事案件数量}", //只显示案件数量
          textStyle: {
            rich: {
              a: {
                color: "green",
                textBorderColor: "white",
                textBorderWidth: "3",
              },
              b: {
                color: "orange",
                textBorderColor: "white",
                textBorderWidth: "3",
              },
            },
          },
        },

        geo: {
          map: this.xo.code,
          center: undefined,
          zoom: 1,
          roam: true,
          scaleLimit: {
            min: 1,
            max: 6,
          },
        },
        //          backgroundColor: '#404a59' ,
        series: [{
          name: "data",
          type: "scatter",
          coordinateSystem: "geo",
          data: this.dataMap(this.xo.mapList),

          label: {
            show: true,
            position: "bottom",
            formatter: "{name|{@[4]}}" + "\n" + "{a|{@[3]}}",
            textAlign: "center",
            rich: {
              a: {
                color: "green",
                textBorderColor: "white",
                textBorderWidth: "3",
                align: "center",
              },
              name: {
                color: "black",
                textBorderColor: "white",
                textBorderWidth: "3",
                align: "center",
              },
            },
          },
          zlevel: 0,
        },],

        toolbox: {
          orient: "vertical",
          right: "3%",
          top: "3%",
          show: true,
          itemSize: 40,
          itemGap: 25,
          feature: {
            myTool1: {
              show: true,
              title: "返回上级",
              onclick: function () { },
            },
          },
        },
      };
      chartBox.setOption(option);
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        chartBox.resize();
      });
    },
    initEducationChart() {
      const chartBox = this.$echarts.init(document.getElementById("educationChart"));
      const option = {
        title: {
          text: "学历分布",
          left: "center",
          show: true,
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          axisLabel: {
            margin: "5",
            fontSize: "8",
            lineHeight: "10",
            interval: "0",
            // formatter: function(value) {
            // 	return value.slice(0, 4) + "\n" + value.slice(4);
            // },
          },
        },
        yAxis: {
          type: "value",
          // axisLabel: {
          // 	formatter: function(value, index) {
          // 		if (value >= 10000 && value < 10000000) {
          // 			value = value / 10000 + "万";
          // 		}
          // 	},
          // },
        },
        series: [{
          type: "bar",
          data: [23, 24, 18, 25, 27, 28, 25],
        },],
      };
      chartBox.setOption(option);
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        chartBox.resize();
      });
    },
    PieChart(name, domName) {
      const chartBox = this.$echarts.init(document.getElementById(domName));
      const option = {
        title: {
          text: name,
          left: "center",
          show: true,
        },
        legend: {
          left: "60%",
          top: "center",
          orient: "vertical",
          textStyle: {
            fontSize: 8,
          },
        },
        series: [{
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          center: ["30%", "50%"],
          // avoidLabelOverlap: false,
          tooltip: {
            trigger: "item",
          },
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            top: "middle",
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [{
            value: 1048,
            name: 'Search Engine'
          },
          {
            value: 735,
            name: 'Direct'
          },
          {
            value: 580,
            name: 'Email'
          },
          {
            value: 484,
            name: 'Union Ads'
          },
          {
            value: 300,
            name: 'Video Ads'
          }
          ]
        }]
      };
      chartBox.setOption(option);
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        chartBox.resize();
      });
    },
    backfn() {
      uni.navigateBack({
        delta: 1
      });
    }
  }
}
</script>

<style scoped lang="scss">
@import '../../style/documentmanage.scss';

.mainPge .page-content {
  margin-top: 0;
}
</style>